﻿<UserControl x:Class="LoadingPanelSample.Controls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Background="Transparent"
             Height="45"
             Width="45">
  
  <UserControl.Resources>
    <SolidColorBrush x:Key="progressCirclesColor" Color="#FF2E6187" />
  </UserControl.Resources>

  <Viewbox Width="40" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
      <Canvas RenderTransformOrigin="0.5,0.5"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Width="120"
              Height="120"
              Loaded="OnCanvasLoaded"
              Unloaded="OnCanvasUnloaded">

        <Ellipse x:Name="_circle0"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="1.0" />

        <Ellipse x:Name="_circle1"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.9" />

        <Ellipse x:Name="_circle2"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.8" />

        <Ellipse x:Name="_circle3"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.7" />

        <Ellipse x:Name="_circle4"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.6" />

        <Ellipse x:Name="_circle5"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.5" />

        <Ellipse x:Name="_circle6"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.4" />

        <Ellipse x:Name="_circle7"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.3" />

        <Ellipse x:Name="_circle8"
                 Width="20"
                 Height="20"
                 Canvas.Left="0"
                 Canvas.Top="0"
                 Stretch="Fill"
                 Fill="{StaticResource progressCirclesColor}"
                 Opacity="0.2" />

        <Canvas.RenderTransform>
          <RotateTransform x:Name="_spinnerRotate" Angle="0" />
        </Canvas.RenderTransform>
      </Canvas>
    </Grid>
  </Viewbox>
</UserControl>
